<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>在线表格</title>
		<link rel="stylesheet" href="jquery.jexcel.css" type="text/css" />
		<link rel="stylesheet" href="./index.css">
		<script src="jquery-1.11.0.min.js"></script>
		<script src="jquery.jexcel.js"></script>
		<script type="text/javascript" src="xlsx.core.min.js"></script>
		<script type="text/javascript" src="exportExcel.js"></script>
	</head>
	<body>
		<div>
			<button id="save">保存</button>
			<button id="export">导出</button>
			<button id="table_title">设置表名</button>
			<input type="file" onchange="importf(this)" />

		</div>
		<div  id='table_set'>
			<div>
				<input type="text" width="300px" height="20px" id="table-name" placeholder="请输入表名" >
			</div>
				<button class="ok" onclick="set_name()">确认</button>
				<button class="cancel" onclick="cancel_name()">取消</button>
		</div>
		<h2 style="text-align: center; background-color: #eaf2ff;" id="title_val" ></h2>
		
		<div id="my">
		</div>

		<div id="page">
			<select id="page-sel">
				<option value ="20">20</option>
				<option value ="30">30</option>
				<option value ="40">40</option>
				<option value ="50">50</option>
				<option value ="60">60</option>

			</select>
		</div>
		
		<div id='f'>
			<div class="content">
				名称:<input type="text" id="content" placeholder="请输入列名">
			</div>
			<div class="selector">
				类型:<select name="" id="selector">
					<option value="text">文本</option>
					<option value="number">数字</option>
					<option value="date">日期</option>
				</select>
			</div>
			<button class='ok' onclick="ok()">确认</button>
			<button class='cancel' onclick="cancel()">取消</button>
		</div>
		
		<script>
			let data = []//表格数据
			let colwidth = []//列宽
			let title_name =[]
			var row = 100;//行数
			var col = 28;//列数
			var pageSize = 20; //每一页显示的数目
			
			//初始化
			defaultData();
			defaultColWidth();
	
			//初始化数据
			function defaultData() {
				let arr = []
				for (let i = 0; i < col; i++) {
					arr.push('')
				}
				for (let i = 0; i < row; i++) {
					data.push(arr);
				}
			}

			//初始化宽度
			function defaultColWidth() {
				for (let i = 0; i < col; i++) {
					colwidth.push(200)
				}
			}

			// 初始化
			$('#my').jexcel({
				data: data,
				colWidths: colwidth
			});


			//设置表名
			$('#table_title').click(function(){
				$('#table_set').css('display','block')
			})

			//确认
			function set_name(){
				// console.log($('#title_val'));
				$('#title_val')[0].innerText = $('#table-name').val()
				if(title_name.length<2){
					title_name.push($('#table-name').val())
				}else{
					title_name.shift();
					title_name.push($('#table-name').val())
				}
				cancel_name();
				if(title_name.length==2 && title_name[0]!==title_name[1]){
					// console.log(title_name)
					let jsonData = JSON.stringify(title_name)
					console.log(jsonData)
					// $.ajax({
					// 	url: "http://10.8.100.63:9091/form", //路径
					// 	type: "post",       //提交方
					// 	data: jsonData,
					// 	dataType:'json',       //规定请求成功后返回的数据
					// 	success: function (text) {
					// 		//请求成功之后进入该方法，data为成功后返回的数据
							
					// 		let inf= JSON.stringify(text);
					// 		alert('保存成功!');
					// 		// console.log("返回的数据:"+inf);
					// 	},
					// 	error: function (err) {
					// 		//请求失败之后进入该方法，errorMsg为失败后返回的错误信息
					// 		console.log(err.status)
					// 		alert('保存失败!')
					// 	}
					// });
				}
			}
			
			//取消
			function cancel_name(){
				$('#table_set').css('display','none')
				$('#table-name').val('');
			}

			//设置列名
             var idd;
			 var iddd;
			$('tbody tr:first').click(function(e){
				$('#f').css('display','block')
				idd = e.originalEvent.path[0];
				iddd = e.target.cellIndex;
				// console.log(iddd)
			});

			//确认
			function ok(){
				idd.innerText = $('#content').val();
				cancel();
			}

			// 取消
			function cancel(){
				$('#f').css('display','none')
				$('#content').val('')
			}

			// console.log($("col-0"))
			//数据格式
			$('#selector').change(function(){
				let formate = $('#selector option:selected').val();
				let rowList = $('tbody tr');
				for(let i=0;i<row;i++){
					$('#'+rowList[i].childNodes[iddd].id).click(function(e){
						e.target.type = formate;
					})
				}
			})
		
			even_odd();
			//设置表格样式
			function even_odd(){
				$('table').css("background-color","#fff")
				$('table tr:even').css("background-color","#eaf2ff")
			}
			
			//获取所有数据
			function getData() {
				let data1 = []
				$(".jexcel").find("tr").each(function(i, v) {
					let arr = []
					let tdArray = $(this).children();
					//跳出表头，进行下次循环
					if (i == 0) return true;
					//遍历列
					for (let j = 1; j < tdArray.length; j++) {
						arr.push(tdArray[j].innerText)
					}
					// 对每行数据进行存储
					data1.push(arr)
				});
				return data1;
			}
 
			// 保存
			$("#save").click(function() {
				JsonPost();
			})
			
			// 发送json数据
			function JsonPost(){
				if($('#title_val')[0].innerText == ''){
					alert('请先设置表名!');
				}else{
					let arr = getData();
					let title = []
					let colName = $(".jexcel").find("tr")[0].childNodes;
					for(let i=0;i<arr.length;i++){
						title.push({key1:arr[i]})
					}
					let data1 = {}
					data1['name'] = $('#title_val')[0].innerText;
					console.log(data1['name'])
					data1["key2"] = title;
					let jsonData = JSON.stringify(data1);
					// console.log("----------------------------->");
					// console.log(jsonData);
					$.ajax({
							url: "http://10.8.100.63:9091/form", //路径
							type: "post",       //提交方
							data: jsonData,
							dataType:'json',       //规定请求成功后返回的数据
							success: function (text) {
								//请求成功之后进入该方法，data为成功后返回的数据
								
								let inf= JSON.stringify(text);
								alert('保存成功!');
								// console.log("返回的数据:"+inf);
							},
							error: function (err) {
								//请求失败之后进入该方法，errorMsg为失败后返回的错误信息
								console.log(err.status)
								alert('保存失败!')
							}
						});
					}
			}
			
			//表格导出
			$('#export').click(function() {
				var list = getData();
				exportExcel(list, '表格.xlsx');
			});

			//导入excel
			var wb; //读取完成的数据
			var rABS = false; //是否将文件读取为二进制字符串
			function importf(obj) { //导入
				let ans = []
				if (!obj.files) {
					return;
				}
				var f = obj.files[0];
				// console.log("f:"+obj)
				var reader = new FileReader();
				reader.onload = function(e) {
					var da = e.target.result;
					if (rABS) {
						wb = XLSX.read(btoa(fixdata(da)), { //手动转化
							type: 'base64'
						});
					} else {
						wb = XLSX.read(da, {
							type: 'binary'
						});
					}
					//wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
					//wb.Sheets[Sheet名]获取第一个Sheet的数据
					// document.getElementById("demo").innerHTML= JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) );

					let str = JSON.parse(JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])))
					let arr = []
					for (let i = 0; i <= str.length; i++) {
						for (aaa in str[0]) {
							arr.push(aaa)
						}

						ans.push(arr)
						arr = []
					}

					$('#my').jexcel({
						data: ans
					});
					page();
				}

				if (rABS) {
					reader.readAsArrayBuffer(f);
				} else {
					reader.readAsBinaryString(f);
				}
			}

			function fixdata(da) { //文件流转BinaryString
				var o = "",
					l = 0,
					w = 10240;
				for (; l < da.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(da.slice(l * w, l *
					w + w)));
				o += String.fromCharCode.apply(null, new Uint8Array(da.slice(l * w)));
				return o;
			}
			
			page();
			// 分页页数
			$('#page-sel').change(function(){
				let Num = $("#page-sel option:selected").val();
				pageSize = Num; //每一页显示的数目  
				page();
			});

			//分页
			function page() {
				var $table = $('table');
				var currentPage = 0; //当前页默认值为0  
				// var pageSize = 20; //每一页显示的数目  
				
				$table.bind('paging', function() {
					$table.find('tbody tr').hide().slice(currentPage * pageSize, (currentPage + 1) * pageSize)
						.show();
				});
				var sumRows = $table.find('tbody tr').length;
				var sumPages = Math.ceil(sumRows / pageSize); //总页数  
				var $pager = $('<div class="page"></div>'); //新建div，放入a标签,显示底部分页码  
				// $pager.appendChild($('#page-sel').innerHTML);
				// 清除多余样式
				if($('.page').length>=1){
					$('.page').empty();
				}

				for (var pageIndex = 0; pageIndex < sumPages; pageIndex++) {
					$('<a href="#" id="pageStyle" onclick="changCss(this)"><span>' + (pageIndex + 1) + '</span></a>')
						.bind("click", {
							"newPage": pageIndex
						}, function(event) {
							currentPage = event.data["newPage"];
							$table.trigger("paging");
							//触发分页函数  
						}).appendTo($pager);
					$pager.append(" ");
					
				}
				$pager.insertAfter($table);
				
				$table.trigger("paging");
			
				//默认第一页的a标签效果  
				var $pagess = $('#pageStyle');
				$pagess[0].style.backgroundColor = "#006B00";
				$pagess[0].style.color = "#ffffff";
			};

			//a链接点击变色，再点其他回复原色  
			function changCss(obj) {
				var arr = document.getElementsByTagName("a");
				for (var i = 0; i < arr.length; i++) {
					if (obj == arr[i]) { //当前页样式  
						obj.style.backgroundColor = "#006B00";
						obj.style.color = "#ffffff";
					} else {
						arr[i].style.color = "";
						arr[i].style.backgroundColor = "";
					}
				}
			}
		
		</script>
	</body>
</html>
